<template>
  <div class="m-input">
    <div class="m-input-title">{{title}}</div>
    <div class="m-input-input">
      <input
        v-if="show"
        :placeholder="placeholder"
        :type="type"
        :password="isPassword"
        :maxlength="maxlength"
        @input="onInput"
        @focus="onFocus"
        placeholder-style="color:#cacaca">
    </div>
    <div class="m-input-button" v-if="btnText" :class="{'clickable': clickable}" @click="onClick">{{btnText}}</div>
    <hr v-if="!isLast">
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'text'
    },
    password: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: String,
      default: 100
    },
    placeholder: String,
    title: String,
    btnText: String,
    clickable: {
      type: Boolean,
      default: true
    },
    value: [String, Number],
    isLast: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isPassword: this.password,
      show: true
    }
  },
  computed: {
    val () {
      return this.value
    }
  },
  methods: {
    onEye () {
      this.isPassword = !this.isPassword
    },
    onClear () {
      this.show = false
      setTimeout(() => {
        this.show = true
        this.$emit('input', '')
      }, 10)
    },
    onInput (e) {
      this.$emit('input', e.target.value)
    },
    onClick () {
      this.clickable && this.$emit('onClick')
    }
  }
}
</script>

<style lang="less" scoped>
.m-input {
  position: relative;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #333;
  overflow: hidden;
  &-title {
    min-width: 120rpx;
    margin-right: 50rpx;
  }
  &-input {
    flex: 1;
    margin-right: 50rpx;
    height: 60rpx;
    line-height: 60rpx;
    input {
      height: 100%;
    }
  }
  &-button {
    width: 220rpx;
    margin-right: -35rpx;
    text-align: center;
    position: relative;
    color: #ccc;
    &.clickable {
      color: #488ff0;
    }
    &:before {
      content: '';
      position: absolute;
      top: -50rpx;
      left: 0;
      display: block;
      height: 150rpx;
      width: 1px;
      background: #e6ebf0;
    }
  }
  &-icon {
    .icon {
      margin-left: 20rpx;
    }
  }
  hr {
    position: absolute;
    height: 1rpx;
    width: 100%;
    background: #e6ebf0;
    bottom: 0;
    left: 30rpx;
  }
}
</style>
